<template>
      <!-- 工具箱 -->
    <div class="task-menuTab"
      :style="{
        transform:'translate3d('+taskMenuTabMove.x+'px,'+taskMenuTabMove.y+'px,1px)',
      }">
      <div class="task-menuTab-drag">
        <i class="el-icon-rank"></i> 全屏工具
      </div>
      <div class="task-menuTab-body">
        <Button v-if="taskMenuTabMove.full"
          icon="arrow-shrink"
          title="退出"
          @click="screenOperation('close')" >退出</Button>
        <Button v-if="!taskMenuTabMove.full"
          icon="arrow-expand"
          title="全屏"
          @click="screenOperation('open')" >全屏</Button>
      </div>
    </div>
</template>

<script>
export default {
  props: ['FormData'],
  data () {
    return {
      visible2: false,
      taskMenuTabMove: {
        full: false,
        moving: false,
        start: [],
        x: '',
        y: '',
        // 移动事件
        taskMenuTabMoveStart: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = true
          // 获取初始位置
          if (_this.start.length) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          } else {
            _this.start = [e.clientX, e.clientY]
          }
        },
        taskMenuTabMoveing: (e) => {
          const _this = this.taskMenuTabMove
          if (_this.moving) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          }
        },
        taskMenuTabMoveOver: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = false
          _this.x = e.clientX - _this.start[0]
          _this.y = e.clientY - _this.start[1]
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    // 全屏按钮
    screenOperation (type) {
      let obj = document.getElementById('作业' + this.FormData.homework_id).childNodes[4].childNodes[0]
      const option = {
        // 切换全屏
        'open': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        'close': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        // 切换样式代码
        'fullTaskEidt editTask': () => { obj.className = 'editTask' },
        'editTask fullTaskEidt': () => { obj.className = 'editTask' },
        'editTask': () => { obj.setAttribute('class', 'fullTaskEidt editTask') }
      }
    // 重置位移
      this.taskMenuTabMove.start = []
      this.taskMenuTabMove.x = 0
      this.taskMenuTabMove.y = 0
      /* eslint-disable*/
      this.taskMenuTabMove.moving = false
    // 改变标记状态
      option[type]()
    // 改变 className
      option[obj.className]()
    }
  }
}
</script>
